<template>
  <div class="container" @click="handleGallaryClick"> 
    <div class="warpper">
         <swiper :options="swiperOptions">
          <swiper-slide v-for="(item,index) of imgs" :key="index">
            <img class="gallary-img" :src="item">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
    name:'CommonGallary',
    props:{
      imgs:{
        type:Array,
        default(){
          return [] //公用组件不应该有默认值
        }
      }
    },
    methods:{
      handleGallaryClick(){
        this.$emit('close')
      }
    },
    data(){
      return{
        swiperOptions:{
          pagination:".swiper-pagination",
          paginationType:"fraction",  //3版本的属性，分页器样式1/3
          // swiper插件一旦监听到父级元素变化会自动刷新。可以解决swiper显示之后宽度计算的问题，否则滚动不正常
          observeParents:true, 
          observer: true
        }
      }
    }
}
</script>
<style scoped lang="stylus">
  .container >>> .swiper-container
    overflow inherit
  .container
    display flex
    flex-direction column
    justify-content center
    position fixed
    z-index 99
    left 0
    top 0
    right 0
    bottom 0
    background #000 
    .warpper
        background #fff
        width 100%
        height 0
        padding-bottom 66%
        .gallary-img
          width 100%
        .swiper-pagination
          color #fff
          bottom -1rem
</style>
